<!-- $Id: example-ajax.html,v 1.2 2006/04/27 21:00:38 pat Exp $ -->
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<?php
require('Header.php');
?>

<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<title>MyWorldTabs</title>

<link rel="stylesheet" href="http://swankestlabs.com/smallsmallworld/js_tabs/example.css" TYPE="text/css" MEDIA="screen">

<!--
Load prototype.js
You can get it at http://prototype.conio.net/
-->
<script src="http://swankestlabs.com/smallsmallworld/prototype_js/prototype-1.6.0.2.js" type="text/javascript"></script>

<script type="text/javascript">

/* Optional: Temporarily hide the "tabber" class so it does not "flash"
   on the page as plain HTML. After tabber runs, the class is changed
   to "tabberlive" and it will appear. */

document.write('<style type="text/css">.tabber{display:none;}<\/style>');

var tabberOptions = {

  'onClick': function(argsObj) {

    var t = argsObj.tabber; /* Tabber object */
    var i = argsObj.index; /* Which tab was clicked (0..n) */
    var div = this.tabs[i].div; /* The tab content div */

    /* Display a loading message */
    div.innerHTML = "<p>Loading...<\/p>";

/* Fetch some html depending on which tab was clicked */
    var url;
switch(i){
  case 0:
     url="<?php echo $my_map_src;?>";
     document.getElementById("tab1").innerHTML='<fb:iframe style="width: 100%; height: 600px;" src="'+url+'" smartsize="false" frameborder="no">';
     break;
  case 1:
     url="http://swankestlabs.com/smallsmallworld/js_tabs/f3.html"
     document.getElementById("tab2").innerHTML='<fb:iframe style="width: 100%; height: 600px;" src="'+url+'" smartsize="false" frameborder="no">';
}

  },

  'onLoad': function(argsObj) {
    /* Load the first tab */
    argsObj.index = 0;
    this.onClick(argsObj);
  }

}
</script>

<script type="text/javascript" src="http://swankestlabs.com/smallsmallworld/js_tabs/tabber.js"></script>

<style type="text/css">
.tabberlive .tabbertab {
  height:200px;
}
</style>
</head>
<body>

<h1>Ajax Tabber Example</h1>
<div class="tabber">

     <div class="tabbertab" id="tab1">
	  <h2>Tab 1</h2>
	  <iframe 
     </div>


     <div class="tabbertab" id="tab2">
	  <h2>Tab 2</h2>
     </div>
</div>

</body>
</html>
